<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>设备列表</title>
    <link rel="stylesheet" href="__CSS__/bootstrap.min.css">
    <link rel="stylesheet" href="__CSS__/hdw.css">
    <link rel="stylesheet" href="__CSS__/common.css">
    <script src="__JS__/libs/jquery-2.0.2.min.js"></script>
    <script src="__JS__/bootstrap/bootstrap.min.js"></script>
    <script src="__JS__/hdw.js"></script>
    <style>
        .equipmentstate{
            text-align: left;
            padding:5px 0;
        }

        .erweima{
            display: block;
            height:30px;
            width: 30px;
            background: url("__IMG__/erweima1.png") no-repeat;
            background-size: cover;
            position: relative;
            top: 10px;
        }
        .shuaxin{
            display: inline-block;
            height: 22px;
            width: 22px;
            background: url("__IMG__/shuaxin.png") no-repeat;
            background-size: cover;
        }

        .myEquip{
            position: relative;
            top: -4px;
            margin-right: 10px;
        }
        .section1 .row{
            border-bottom: 1px solid #ddd;
            text-align: center;
        }
        .equipmentImg img{
            height: 80%;
        }

        .down{
            display: inline-block;
            height:22px;
            /*background: url("__IMG__/Down.png") no-repeat;*/
            /*background-size: cover;*/
        }
        .down.rotate{
            -webkit-transition:all 0.5s ease-in;
            transform-origin:50% 50%;
            transform:rotate(180deg);
            -ms-transform:rotate(180deg); 	/* IE 9 */
            -moz-transform:rotate(180deg); 	/* Firefox */
            -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
            -o-transform:rotate(180deg); 	/* Opera */
        }
        .equipmentList.hide{
            display: none;
        }
        .section1{
            margin-top: 5px;
        }
        .section1 p b{
            width: 60px;
            text-align: right;
            display: inline-block;
        }
        .section1 i{
            width: 22px;
            display: inline-block;
        }
        .nextImg img{
            height: 17px;
            width: 15px;
        }
        .equipmentList .row{
            display: block;
            border-bottom: 1px solid #ddd;
            text-align: center;
        }
    </style>
</head>
<body>

<section class="section1">
    <div class="container">
        <div class="row row1">
            <div class="col-sm-4  col-xs-5">
                <span class="myEquip">我的设备</span>
                <span class="shuaxin"></span>
            </div>
            <div class="col-sm-8  col-xs-7" style="text-align: right;">
                <img src="__IMG__/Down.png" class="down">
            </div>
        </div>
    </div>
    <div class="equipmentList">
        <div class="container equipments">
            <a href="{{:url('Cons/devinfo')}}" class="row">
                <div class="col-sm-3  col-xs-3 equipmentImg" >
                    <img src="__IMG__/equipment.png"  alt="" >
                </div>
                <div class="col-sm-8 col-xs-8 equipmentstate">
                    <div class="col-sm-6  col-xs-6 ">
                        <b>温湿传感器</b>
                    </div>
                    <div class="col-sm-6  col-xs-6 ">
                        <b>在线</b>
                    </div>
                    <div class="col-sm-6  col-xs-6 ">
                        <b>温度：</b>
                        <span>25℃</span>
                    </div>
                    <div class="col-sm-6  col-xs-6 ">
                        <b>湿度：</b>
                        <span>25</span>
                    </div>
                    <div class="col-sm-6  col-xs-6 ">
                        <b>PM2.5：</b>
                        <span>25</span>
                    </div>
                </div>
                <div class="col-sm-1  col-xs-1 nextImg" >
                    <img src="__IMG__/next.png"  alt="" >
                </div>
            </a>
            <a href="{{:url('Cons/devinfo')}}" class="row">
                <div class="col-sm-3  col-xs-3 equipmentImg" >
                    <img src="__IMG__/equipment.png"  alt="" >
                </div>
                <div class="col-sm-8 col-xs-8 equipmentstate">
                    <div class="col-sm-6  col-xs-6 ">
                        <b>温湿传感器</b>
                    </div>
                    <div class="col-sm-6  col-xs-6 ">
                        <b>在线</b>
                    </div>
                    <div class="col-sm-6  col-xs-6 ">
                        <b>温度：</b>
                        <span>25℃</span>
                    </div>
                    <div class="col-sm-6  col-xs-6 ">
                        <b>湿度：</b>
                        <span>25</span>
                    </div>
                    <div class="col-sm-6  col-xs-6 ">
                        <b>PM2.5：</b>
                        <span>25</span>
                    </div>
                </div>
                <div class="col-sm-1  col-xs-1 nextImg" >
                    <img src="__IMG__/next.png"  alt="" >
                </div>
            </a>
            <a href="{{:url('Cons/devinfo')}}" class="row">
                <div class="col-sm-3  col-xs-3 equipmentImg" >
                    <img src="__IMG__/equipment.png"  alt="" >
                </div>
                <div class="col-sm-8 col-xs-8 equipmentstate">
                    <div class="col-sm-6  col-xs-6 ">
                        <b>温湿传感器</b>
                    </div>
                    <div class="col-sm-6  col-xs-6 ">
                        <b>在线</b>
                    </div>
                    <div class="col-sm-6  col-xs-6 ">
                        <b>温度：</b>
                        <span>25℃</span>
                    </div>
                    <div class="col-sm-6  col-xs-6 ">
                        <b>湿度：</b>
                        <span>25</span>
                    </div>
                    <div class="col-sm-6  col-xs-6 ">
                        <b>PM2.5：</b>
                        <span>25</span>
                    </div>
                </div>
                <div class="col-sm-1  col-xs-1 nextImg" >
                    <img src="__IMG__/next.png"  alt="" >
                </div>
            </a>
            <a href="{{:url('Cons/devinfo')}}" class="row">
                <div class="col-sm-3  col-xs-3 equipmentImg" >
                    <img src="__IMG__/equipment.png"  alt="" >
                </div>
                <div class="col-sm-8 col-xs-8 equipmentstate">
                    <div class="col-sm-6  col-xs-6 ">
                        <b>温湿传感器</b>
                    </div>
                    <div class="col-sm-6  col-xs-6 ">
                        <b>在线</b>
                    </div>
                    <div class="col-sm-6  col-xs-6 ">
                        <b>温度：</b>
                        <span>25℃</span>
                    </div>
                    <div class="col-sm-6  col-xs-6 ">
                        <b>湿度：</b>
                        <span>25</span>
                    </div>
                    <div class="col-sm-6  col-xs-6 ">
                        <b>PM2.5：</b>
                        <span>25</span>
                    </div>
                </div>
                <div class="col-sm-1  col-xs-1 nextImg" >
                    <img src="__IMG__/next.png"  alt="" >
                </div>
            </a>
        </div>
    </div>
</section>
<script>
    //页面加载时绑定按钮点击事件
    $(function(){
        var h=$(".equipmentstate").height();
        console.log(h);
        $(".equipmentImg").height(h);
        $(".nextImg").height(h);
        $(".equipmentImg").css("lineHeight", h+"px");
        $(".nextImg").css("lineHeight", h+"px");
        $(".shuaxin").click(function(){
            refresh();
        });
        $(".down").click(function(){
            $(this).toggleClass("rotate");
            $(this).parents().parent('.container').next().toggleClass("hide");
//            $(".equipmentList").toggleClass("hide");
        })
    });
    //点击按钮调用的方法
    function refresh(){
        window.location.reload();//刷新当前页面.
    }
</script>
</body>
</html>